<template>
  <div class="flex">
    <!-- <left :setpData="setpData"></left> -->
    <div class="apply_right" v-if="!isStep3">
      <steps-demo :stepsObj="stepsObj"></steps-demo>
      <div class="hr"></div>
      <div class="right_form">
        <span class="title">会议主题</span>
        <el-button
          type="text"
          icon="el-icon-circle-plus-outline"
          @click="addMeeting()"
          >添加会议主题</el-button
        >
      </div>
      <div
        class="form_item"
        v-for="(item, index) in MeetingData"
        :key="item.sj"
      >
        <div class="item">
          <span class="item_zt">主题：{{ index + 1 }}</span>
          <div class="flex flex-warp mg32_24" style="align-items: center">
            <div class="mb16">
              <span> <span style="color: red;">*</span> 主题名称：</span>
              <el-input
                v-model="item.title"
                placeholder="请输入关键字"
                class="width200 mr16"
              />
            </div>
            <div class="mb16 mr16">
              <span><span style="color: red;">*</span> 主题时间 ：</span>
              <el-date-picker
                v-model="item.times"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </div>
            <div class="mb20">
              <el-button @click="addReport(item.sj)">添加报告</el-button>
              <el-button type="primary" @click="delMeeting(item)"
                >删除主题</el-button
              >
            </div>
          </div>
          <!-- 表格 -->
          <div class="mt_table">
            <el-table
              :data="item.reportList"
              style="width: 100%"
              empty-text="暂未设置会议主题报告，请添加报告"
            >
              <el-table-column
                prop="StartTime"
                label="报告时间"
                min-width="80"
                align="left"
              >
                <template slot-scope="scope">
                  {{ scope.row.StartTime }}-{{ scope.row.VideoEndDate }}
                </template>
              </el-table-column>
              <el-table-column
                prop="title"
                label="报告名称"
                min-width="230"
                align="left"
              >
              </el-table-column>
              <el-table-column
                prop="author"
                label="报告人"
                min-width="80"
                align="left"
              >
              </el-table-column>
              <el-table-column
                prop="content"
                label="报告人简介"
                min-width="230"
                align="left"
              >
              <template slot-scope="scope">
                 <div>
                  {{ scope.row.content}}
                 </div>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                align="center"
                min-width="100"
                fixed="right"
              >
                <template slot-scope="scope">
                  <el-button type="text" @click="editReport(item, scope.row)"
                    >编辑</el-button
                  >
                  <el-button type="text" @click="delReportList(item, scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="right_form" style="margin-bottom: 10px">
        <span class="title"
          >会议嘉宾
          <span class="label"
            >在会议主题中设置的嘉宾，将会展示在会议页面上，可调整展示的顺序</span
          >
        </span>
        <span></span>
      </div>
      <div class="zj_body">
        <div
        v-loading="isloading"
          class="zj_list"
          v-for="(item,index) in reportPeopleList"
          :key="item.authorID"
        >
          <div class="list_left">
            <img class="logo_img" :src="item.picUrl?item.picUrl:item.img" alt="" />
            <div>
              <span class="name">{{ item.name?item.name:item.authorName }}</span>
              <p class="mt_js">{{ item.honer?item.honer:item.info }}</p>
            </div>
          </div>
          <span>
            <el-button type="text" class="mr16" @click="upMove(index)"
              >上移</el-button
            >
            <el-button type="text" class="mr16" @click="downMove(index)"
              >下移</el-button
            >
            <el-button type="text" class="mr16" @click="delMove(item)"
              >删除</el-button
            >
          </span>
        </div>
      </div>
      <div class="right_btm">
        <el-button @click="saveDrafts()">保存草稿箱</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >下一步</el-button
        >
      </div>
    </div>
    <div class="apply_right" v-if="isStep3">
      <steps-threes :isStep3="isStep3" :secendData="secendData" @isleavethree="isleavethree"></steps-threes>
    </div>
    <el-dialog title="添加报告" :visible.sync="ReportDia" width="600px">
      <add-author ref="addAuthorDia" @renovate="renovate"></add-author>
      <el-form
        :model="ruleFormDia"
        :rules="rules"
        ref="ruleFormDia"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="报告名称" prop="title">
          <el-input
            v-model="ruleFormDia.title"
            placeholder="请输入报告名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="报告时间" prop="StartTime">
          <el-date-picker
                v-model="ruleFormDia.times"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="changtime"
              >
              </el-date-picker>
        </el-form-item>
        <el-form-item label="演讲嘉宾" prop="authorID">
          <div class="flex" style="align-items: center">
            <el-select v-model="ruleFormDia.authorID" filterable  placeholder="请选择">
              <el-option
                v-for="item in AuthorsData"
                :key="item.id"
                :label="item.authorName"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <el-button type="primary" style="margin-left: 10px; height: 32px" @click="$refs.addAuthorDia.addAuthorDia = true"
              >新增嘉宾</el-button
            >
          </div>
        </el-form-item>
        <el-form-item label="产品分类" prop="immsortThree">
          <el-cascader
            v-if="showvideo"
            ref="areaCascader"
            v-model="ProductClassification"
            class="formWidthdpl300"
            :props="CPprops"
            @change="changeImmsort"
          />
        </el-form-item>
        <el-form-item label="领域分类" prop="imIndustrytwo">
          <el-cascader
            v-if="showvideo"
            v-model="DomainClassification"
            ref="areaCascader2"
            class="formWidthdpl300"
            :props="props2"
            @change="changeImIndustry"
          />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input
            v-model="ruleFormDia.sort"
            placeholder="请输入排序"
          ></el-input>
        </el-form-item>
        <el-form-item label="报告内容" prop="content">
          <el-input
            type="textarea"
            placeholder="请输入报告内容"
            :rows="4"
            v-model="ruleFormDia.content"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" v-if="isadd">
        <el-button @click="ReportDia = false">取 消</el-button>
        <el-button type="primary" @click="addReportData('ruleFormDia')"
          >确 定</el-button
        >
      </div>
      <div slot="footer" class="dialog-footer" v-if="isedit">
        <el-button @click="ReportDia = false">取 消</el-button>
        <el-button type="primary" @click="editReportData('ruleFormDia')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
  
  <script>
import stepsDemo from "@/views/selfCreate/components/Steps.vue";
import stepsThrees from "./step3.vue";
import api from "@/api/index";
import axios from "axios";
import Cookies from 'js-cookie'
import addAuthor from '@/views/selfCreate/components/addAuthor.vue'
import { changeDateFormat8, deepClone } from "@/utils/commin";
export default {
  name: "stepsTwos",
  components: {
    ImgList: () => import("@/components/imgUpload"),
    stepsDemo,
    stepsThrees,
    addAuthor
  },
  props: {
    isStep2: Boolean,
    firstFrom: Object,
  },
  data() {
    return {
      isloading:false,
      ReportDia: false,
      isadd: false,
      isedit: false,
      setpData: {
        step: 1,
        stepExamineOneStatus: 2,
        stepExaminetwoStatus: 1,
      },
      stepsObj: {
        list: [
          "填写会议信息",
          "设置会议主题和嘉宾",
          "进行会议设置",
          "会议预约审核",
        ],
        nums: 2,
      },
      isStep3: false,
      searchObj: {
        times: [],
        title: "",
        DataTable: [],
      },
      MeetingData: [
        {
          title: "",
          StartTime: "",
          VideoEndDate: "",
          sj: Math.random(),
          reportList: [],
          times: [],
        },
      ],
      secendData:{},
      itemSJ: null,
      reportPeopleList: [],
      AuthorsData: [],
      ruleForm: {
        applyType: "",
        isSetQuestion: 1,
        meetingimg: "",
        linkId: "",
        authorid: "",
      },
      ruleFormDia: {
        title: "",

        StartTime: "",
        VideoEndDate: "",
        times:[],

        authorID: "",
        authorImg: "",
        author: "",

        content: "",
        contentHtml: "",

        sort: "",

        imIndustryone: "",
        imIndustryoneName: "",
        imIndustrytwo: "",
        imIndustrytwoName: "",
        immsortOne: "",
        immsortOneName: "",
        immsortThree: "",
        immsortThreeName: "",
        immsortTwo: "",
        immsortTwoName: "",
      },
      showvideo: true,
      ProductClassification: [],
      DomainClassification: [],
      CPprops: {
        lazy: true,
        lazyLoad: this.getLazyload, // 产品分类
      },
      props2: {
        lazy: true,
        lazyLoad: this.getLazyload2, // 领域分类
      },
      rules: {
        title: [{ required: true, message: "请输入报告名称", trigger: "blur" }],
        StartTime: [
          { required: true, message: "请选择开始时间", trigger: "blur" },
        ],
        VideoEndDate: [
          { required: true, message: "请选择结束时间", trigger: "blur" },
        ],
        content: [
          { required: true, message: "请填写报告内容", trigger: "blur" },
        ],
        sort: [{ required: true, message: "请输入排序", trigger: "blur" }],
        authorID: [
          { required: true, message: "请选择报告嘉宾", trigger: "change" },
        ],
        immsortThree: [
          { required: true, message: "请选择产品分类", trigger: "change" },
        ],
        imIndustrytwo: [
          { required: true, message: "请选择领域分类", trigger: "change" },
        ],
      },
      parentSJ: null,
      childrenSJ: null,
    };
  },

  mounted() {
    if (this.isStep2) {
      if (this.$route.query.mid) {
        this.getSecondData();
      }
      if (this.$route.query.id) {
        this.getDraftsMeetingInfo();
      }
    }
  },
  methods: {
    renovate(val){
     
    },
    isleavethree(val){
      this.$emit('isleave',val)
    },
    getDraftsMeetingInfo() {
      let form = {
        id: this.$route.query.id,
        imshowId: this.$store.getters.imShowId,
      };
      api.selfMeting.getMeetingDraftById(form).then((res) => {
        const data = JSON.parse(res.data.subjectinfo);
        this.MeetingData = data.subjectList;
        this.MeetingData.forEach((item) => {
          item.sj = Math.random();
          if(item.reportList&&item.reportList.length>0){
            item.reportList.forEach((items) => {
          items.sj = Math.random();
          });   
          }
     
          item.times=[]
          if (item.StartTime&&item.VideoEndDate) {
            item.times.push(item.StartTime)
          item.times.push(item.VideoEndDate)
          }
        });
        this.reportPeopleList = data.reportPeopleList;
      });
    },
    changtime(val){
     this.ruleFormDia.StartTime=this.ruleFormDia.times[0]
     this.ruleFormDia.VideoEndDate=this.ruleFormDia.times[1]
    },
    delMove(val){
     this.isloading=true
     this.reportPeopleList=this.reportPeopleList.filter(item=>{
      if (item.authorID!=val.authorID) {
        return item
      }
     })
     this.isloading=false
    },
    //编辑
    editReport(arr, val) {
      this.showvideo=false
      this.ruleFormDia = deepClone(val);
      this.ruleFormDia.times=[]
      this.DomainClassification=[]
      this.ProductClassification=[]
      this.DomainClassification.push(this.ruleFormDia.imIndustryone)
      this.DomainClassification.push(this.ruleFormDia.imIndustrytwo)
      this.ProductClassification.push(this.ruleFormDia.immsortOne)
      this.ProductClassification.push(this.ruleFormDia.immsortTwo)
      this.ProductClassification.push(this.ruleFormDia.immsortThree)
      this.ruleFormDia.authorID=Number(this.ruleFormDia.authorID)
      setTimeout(() => {
        this.showvideo=true
      }, 1000);
      this.ruleFormDia.times.push(this.ruleFormDia.StartTime)
      this.ruleFormDia.times.push(this.ruleFormDia.VideoEndDate)
     
      //公共变量判断编辑内容，便于修改大表单
      this.parentSJ = arr.sj;
      this.childrenSJ = val.sj;
      //区分新增还是编辑
      this.isadd = false;
      this.isedit = true;
      //公共变量 判断是否修改报告人，便于报告人列表修改
      this.oldauthorId = val.authorID;
      this.ReportDia = true;
      this.getAuthors();
    },
    //修改报告
    editReportData(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ruleFormDia.StartTime=this.ruleFormDia.times[0]
          this.ruleFormDia.VideoEndDate=this.ruleFormDia.times[1]
          //筛选出来然后删除该项最后再重新添加
          this.MeetingData.forEach((item) => {
            if (item.sj == this.parentSJ) {
              item.reportList.forEach((items, index) => {
                if (items.sj == this.childrenSJ) {
                  delete item.reportList[index];
                }
                this.AuthorsData.forEach((item) => {
                  if (item.id == this.ruleFormDia.authorID) {
                    (this.ruleFormDia.authorImg = item.img),
                    (this.ruleFormDia.author = item.authorName);
                  }
                });
                this.ruleFormDia.contentHtml = this.ruleFormDia.content;
              });
              item.reportList.push(this.ruleFormDia);
            }
          });
          //判断是否修改报告人
          if (this.ruleFormDia.authorID != this.oldauthorId) {
            this.changeImg(this.ruleFormDia.authorID, 3, this.oldauthorId);
          }

          this.ReportDia = false;
        } else {
          //console.log("error submit!!");
          return false;
        }
      });
    },
    //添加报告
    addReport(val) {
      this.isadd = true;
      this.isedit = false;
      this.ReportDia = true;
      this.ruleFormDia = {};
      this.ruleFormDia.sj = Math.random();
      this.DomainClassification = [];
      this.ProductClassification = [];
      this.itemSJ = val;
      this.getAuthors();
    },
    //新增报告
    addReportData(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ruleFormDia.StartTime=this.ruleFormDia.times[0]
          this.ruleFormDia.VideoEndDate=this.ruleFormDia.times[1]
          this.AuthorsData.forEach((item) => {
            if (item.id == this.ruleFormDia.authorID) {
              (this.ruleFormDia.authorImg = item.img),
              (this.ruleFormDia.author = item.authorName);
            }
          });
          this.ruleFormDia.contentHtml = this.ruleFormDia.content;
          this.MeetingData.forEach((item) => {
            if (item.sj == this.itemSJ) {
              var name = deepClone(this.ruleFormDia);
              item.reportList.push(name);
            }
          });
          this.changeImg(this.ruleFormDia.authorID, 2);
          this.ReportDia = false;
        } else {
          //console.log("error submit!!");
          return false;
        }
      });
    },
    // 上移
    upMove(index) {
      if(index==0){
        this.$message({type:'warning',message:'已经到顶了，不能上移了！'})
      }else{
        this.isloading=true
        let temp = this.reportPeopleList[index];
        this.reportPeopleList[index] = this.reportPeopleList[index-1];
        this.reportPeopleList[index-1] = temp;
        this.isloading=false
      }
    },
    // 下移
    downMove(index) {
      // debugger;
      if(index==this.reportPeopleList.length-1){
        this.$message({type:'warning',message:'已经到底了，不能下移了！'})
      }else{
        this.isloading=true
        let temp =this.reportPeopleList[index];
        this.reportPeopleList[index] = this.reportPeopleList[index+1];
        this.reportPeopleList[index+1] = temp;
        this.isloading=false
      }
    },
    //删除报告
    delReportList(arr, val) {
      arr.reportList = arr.reportList.filter((item) => {
        if (val.sj != item.sj) {
          return item;
        }
      });
      this.MeetingData.forEach((item) => {
        if (item.sj == arr.sj) {
          item.reportList = arr.reportList;
        }
      });
      this.changeImg(val.authorID, 1);
    },
    changeImg(val, nums, oldval) {
      //循环大列表，看有几个报告的报告人相同，有2个以上不删除
      this.isloading=true
      var num = 0;
      this.MeetingData.forEach((item) => {
        item.reportList.forEach((ites) => {
          if (val == ites.authorID) {
            num++;
          }
        });
      });
      if (nums == 1) {
        //删除
        if (num == 1) {
          this.reportPeopleList = this.reportPeopleList.filter((item) => {
            if (val != item.authorID) {
              return item;
            }
          });
        }
      } else if (nums == 2) {
        //新增
        if (num == 1) {
          this.AuthorsData.forEach((item) => {
            if (item.id == val) {
              let form={
                authorID:item.id,
                picUrl:item.img,
                name:item.authorName,
                honer:item.jobAddress,
                contents:item.info
              }
              this.reportPeopleList.push(form);
            }
          });
        }
      } else {
        //修改
        if (num == 1) {
          this.AuthorsData.forEach((item) => {
            if (item.id == val) {
              let form={
                authorID:item.id,
                picUrl:item.img,
                name:item.authorName,
                honer:item.jobAddress,
                contents:item.info
              }
              this.reportPeopleList.push(form);
            }
          });
        }
        var num2 = 0;
        this.MeetingData.forEach((item) => {
          item.reportList.forEach((ites) => {
            if (val == ites.authorID) {
              num2++;
            }
          });
        });
        if (num2 == 1) {
          this.reportPeopleList = this.reportPeopleList.filter((item) => {
            if (oldval != item.authorID) {
              return item;
            }
          });
        }
      }
      this.isloading=false
    },
    delMeeting(val) {
      this.MeetingData = this.MeetingData.filter((item) => {
        if (item.sj != val.sj) {
          return item;
        }
      });
    },
    addMeeting() {
      let form = {
        title: "",
        StartTime: "",
        VideoEndDate: "",
        sort: "",
        sj: Math.random(),
        reportList: [],
        times: [],
      };
      this.MeetingData.push(form);
    },
    getSecondData() {
      let form = {
        imshowId: this.$store.getters.imShowId,
        mid: this.$route.query.mid,
      };
      api.selfMeting.getSubjectInfoList(form).then((res) => {
        this.MeetingData = res.data.subjectList;
        this.MeetingData.forEach((item) => {
          item.sj = Math.random();
          item.reportList.forEach((items) => {
          items.sj = Math.random();
          });
          item.times=[]
          if(item.StartTime&&item.VideoEndDate){
            item.times.push(item.StartTime)
          item.times.push(item.VideoEndDate)
          }
        });
        this.reportPeopleList = res.data.reportPeopleList;
      });
    },
    // 获取产品分类内容
    getLazyload(node, resolve) {
      if (!node) {
        return false;
      }
      const { level } = node;

      axios(
        `https://gateway.instrument.com.cn/classificationMonitoring/classify/getPrincipleClassifySelectByParentId?parentId=${
          level == 0 ? 0 : node.value
        }`,
        { headers: { "Content-type": "application/x-www-form-urlencoded" } }
      ).then((res) => {
        // 换成你的接口方法
        if (res.data.code == 1) {
          resolve(
            res.data.data.map((val) => {
              return {
                value: val.id,
                label: val.name,
                leaf: level >= 2, // 因为省市区三项，所以第三次点击就不用在加载了，所以 >=2
              };
            })
          );
        }
      });
    },
    // 获取领域分类内容
    getLazyload2(node, resolve) {
      if (!node) {
        return false;
      }
      const { level } = node;
      axios(
        `https://gateway.instrument.com.cn/classificationMonitoring/classify/getIndustryClassifySelectByParentId?parentId=${
          level == 0 ? 0 : node.value
        }`,
        { headers: { "Content-type": "application/x-www-form-urlencoded" } }
      ).then((res) => {
        // 换成你的接口方法
        if (res.data.code == 1) {
          resolve(
            res.data.data.map((val) => {
              return {
                value: val.id,
                label: val.name,
                leaf: level >= 1, // 因为省市区三项，所以第三次点击就不用在加载了，所以 >=2
              };
            })
          );
        }
      });
    },
    changeImmsort(val) {
      this.ruleFormDia.immsortOne = val[0];
      this.ruleFormDia.immsortTwo = val[1];
      this.ruleFormDia.immsortThree = val[2];
      this.$nextTick(() => {
        let data = this.$refs["areaCascader"].getCheckedNodes(false);
        this.ruleFormDia.immsortOneName = data[0].pathLabels[0];
        this.ruleFormDia.immsortTwoName = data[0].pathLabels[1];
        this.ruleFormDia.immsortThreeName = data[0].pathLabels[2];
      });
    },
    changeImIndustry(val) {
      this.ruleFormDia.imIndustryone = val[0];
      this.ruleFormDia.imIndustrytwo = val[1];
      this.$nextTick(() => {
        let data = this.$refs["areaCascader2"].getCheckedNodes(false);
        this.ruleFormDia.imIndustryoneName = data[0].pathLabels[0];
        this.ruleFormDia.imIndustrytwoName = data[0].pathLabels[1];
      });
    },
    //获取嘉宾
    getAuthors() {
      let form = {
        imshowId: this.$store.getters.imShowId,
      };
      api.selfMeting.getAuthors(form).then((res) => {
        this.AuthorsData = res.data;
      });
    },
    submitForm(){
      const passwordValid = Cookies.get('passwordValid')
  const username = Cookies.get('username')
  const mobile = Cookies.get('mobile')
  const CheckValid = Cookies.get('CheckValid')
   if (mobile && passwordValid && username && CheckValid) {
      for (let i = 0; i < this.MeetingData.length; i++) {
        if (this.MeetingData[i].times.length==0) {
            this.$message({type:'error',message:'主题时间为必选项'})
            return false
           }
           if (this.MeetingData[i].title=='') {
            this.$message({type:'error',message:'主题标题为必选项'})
            return false
           }
      }

         this.MeetingData.forEach((item,index) => {
           item.StartTime=item.times[0]
           item.VideoEndDate=item.times[1]
           if (item==null) {
            delete this.MeetingData[index]
           }
           if (item.reportList&&item.reportList.length>0) {
            var arr=[]
            item.reportList.forEach((items,indexs) => {
              if (items.reportList) {
                 delete items.reportList
              }
              arr.push(items)

              if (items==null) {
                delete items[indexs]
              }
            });
            item.reportList=arr
           }
         });
         let form={
          meetinginfo:this.firstFrom,
          subjectinfo:{
            subjectList:this.MeetingData,
            reportPeopleList:this.reportPeopleList
          }
         }
         this.secendData=form
         this.isStep3=true
        }else{
          this.$emit('isleave',true)
      this.$router.push('/login?type=sign')
    }
    },
    saveDrafts() {
         this.MeetingData.forEach(item => {
          if (item.times.length>0) {
            item.StartTime=item.times[0]
           item.VideoEndDate=item.times[1]
          }
          if (item==null) {
            delete this.MeetingData[index]
           }
           if (item.reportList&&item.reportList.length>0) {
            item.reportList.forEach((items,indexs) => {
              if (items.reportList) {
                 delete items.reportList
              }
              if (items==null) {
            delete items[indexs]
           }
            });
           }
         });
      let obj={
            subjectList:this.MeetingData,
            reportPeopleList:this.reportPeopleList
      }
      let form = {
        company: this.$store.state.root.companyData.webinarCompanyName,
        imshowid: this.$store.getters.imShowId,
        meettype: this.$route.query.meetType,
        meetinginfo: JSON.stringify(this.firstFrom),
        subjectinfo:JSON.stringify(obj)
      };
      //判断从定制厂商会进来
      if (this.$route.query.meetType) {
        form.meettype = this.$route.query.meetType;
      }

      if (this.$route.query.id) {
        form.id = this.$route.query.id;
      }
      api.selfMeting.saveMeetingDraft(form).then((res) => {
        this.$message({ type: "success", message: "保存成功！" });
        this.$emit('isleave',true)
        if(this.$route.query.meetType){
          if (this.$route.query.meetType==3) {
            this.$router.push('/selfCreate/selfMeting')
          }else{
            this.$router.push('/custoMade/index')
          }
        }else{
          this.$router.push('/selfCreate/selfMeting')
        }
      });
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.wid340 {
  width: 340px !important;
}

::v-deep .mangedia .el-dialog__body {
  padding: 0px !important;
}
::v-deep .el-upload--picture-card {
  width: 100px !important;
  height: 100px !important;
  line-height: 100px;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 100px !important;
  height: 100px !important;
  line-height: 100px;
}
.wid450 {
  width: 450px !important;
}
.formWidthdpl300 {
  width: 300px !important;
}
.wid200 {
  width: 200px !important;
}
.wid150 {
  width: 150px;
  margin-bottom: 16px;
}
.apply_right {
  flex-grow: 1;
  width: 50%;
  background: #fff;
  .hr {
    height: 1px;
    width: 100%;
    background: #f0f3f7;
  }
  .right_form {
    @include flex(row, center, space-between);

    margin: 24px 32px 32px;
    line-height: 16px;
    .title {
      padding-left: 10px;
      display: inline-block;
      font-size: 16px;
      font-weight: 600;
      color: #202933;
      border-left: 4px solid #0c7ff2;
      .label {
        font-size: 14px;
        color: #4f5862;
        font-weight: 200;
        padding-left: 4px;
      }
    }
  }
  .zj_body {
    padding: 0 32px;
    .zj_list {
      padding: 32px 0;
      border-bottom: 1px solid #e5eaf0;
      @include flex(row, center, space-between);
      .list_left {
        @include flex(row, center, flex-start);
        .logo_img {
          width: 80px;
          height: 80px;
          display: inline-block;
          border-radius: 50%;
          margin-right: 24px;
          border: 1px solid #e5eaf0;
        }
        .name {
          font-size: 20px;
          font-weight: 600;
          color: #4f5862;
          line-height: 23px;
        }
        .mt_js {
          font-size: 14px;
          margin-top: 8px;
          color: #4f5862;
          line-height: 16px;
        }
      }
    }
  }

  .form_item {
    margin: 0 32px 32px;
    padding-bottom: 1px;
    .item {
      background: linear-gradient(
        180deg,
        #f8fbff 0%,
        rgba(255, 255, 255, 0) 100%
      );
      border: 1px solid #e5eaf0;
      padding: 16px 16px 16px 0;
      margin-bottom: 20px;
      .item_zt {
        background: url("https://instrumentui.oss-cn-beijing.aliyuncs.com/ui/simg/instrument/20230302/yht/img/zt_bj.png")
          no-repeat;
        background-size: 100%;
        width: 92px;
        height: 28px;
        font-size: 16px;
        font-weight: 600;
        color: #ffffff;
        line-height: 28px;
        padding-left: 7px;
        display: inline-block;
      }
      .mg32_24 {
        margin: 32px 24px 6px;
      }
      .mt_table {
        margin-left: 22px;
      }
    }
  }
}
.right_btm {
  margin-top: 100px;
  padding-top: 24px;
  border-top: 1px solid #e5eaf0;
  text-align: center;
}
::v-deep .el-dialog__footer {
  padding-top: 0px;
  // border-top: 1px solid #e5eaf0;
}
::v-deep .el-dialog__header {
  background: #f5f8fc;
  text-align: left;
  font-size: 16px;
  color: #202933;
  padding: 11px 16px;
}
::v-deep .el-dialog__body {
  padding: 25px 25px 10px !important;
}
::v-deep .el-dialog__title {
  font-size: 16px;
}
</style>